<template>
    <div>
        <div class="search">
            <img @click="goUrl"  src="../assets/search-input-icon-back.png" class="search-back" />
            <div class="search-right">
                <input name="search-key" autocomplete="off" v-model="searchKey" @blur="searchHistoryFn" @input="getSearch" placeholder="搜索目的地城市\活动" class="search-right-input"  />
                <img  src="../assets/search-input-icon-search.png"  class="search-right-icon"  />
            </div>
        </div>
        <div class="search-list" v-if="showFlag">
            <div  v-for="(item,index) in  searchArr" >
                <router-link class="search-list-item" v-if="item.id=='goods_id'" :to="'/show/'+item.goods_id">
                    <div class="search-list-item-title">{{item.name}}</div>
                    <div class="search-list-item-icon">线路</div>
                </router-link>
                <router-link class="search-list-item" v-if="item.id=='city_id'" :to="{path:'/city',query:{city_id:item.city_id,city_name:encodeURI(item.name)}}">
                    <div class="search-list-item-title">{{item.name}}</div>
                    <div class="search-list-item-icon">城市</div>
                </router-link>
                <router-link class="search-list-item" v-if="item.id=='line_id'" :to="{path:'/GroupShow',query:{line_id:item.line_id,product_id:product_id}}">
                    <div class="search-list-item-title">{{item.name}}</div>
                    <div class="search-list-item-icon">拼游</div>
                </router-link>
            </div>
        </div>
        <div class="history"  v-if="!showFlag">
            <div class="history-title">
                <span class="history-title-name">搜索历史</span>
                <span class="history-title-empty" @click='searchHistoryClear' >清空</span>
            </div>
            <div class="history-list" >
                <span v-for="item in  searchHistory" @click="histSearch(item)"  class="history-list-item">{{item}}</span>
            </div>
        </div>
        <div class="hotCity">
            <div class="hotCity-title">热门城市</div>
            <div class="hotCity-list">
                <router-link v-for="item in hotArr" :to="{path:'/city',query:{city_id:item.city_id,city_name:encodeURI(item.name)}}"  class="hotCity-list-item" >{{item.name}}</router-link>
            </div>
        </div>
       <!-- <div  class="hotSearch">
            <div  class="hotSearch-title">热门搜索</div>
            <div class="hotSearch-list">
                <router-link to="" class="hotSearch-list-item" url="">第一家星巴克</router-link>
                <router-link to="" class="hotSearch-list-item"  url="">比尔和梅林达盖茨基金会游客中心</router-link>
                <router-link to="" class="hotSearch-list-item"  url="">拉斯维加斯</router-link>
            </div>
        </div>-->
    </div>
</template>

<script>
    import {Toast} from "mint-ui"
    import storage from "../store/localstorage"
    import wxShare from "../store/wxShare"
    export default {
        name: "Search",
        data(){
            return{
                searchArr:[],
                searchKey:'',
                keywordsTime:0,
                showFlag:false,
                hotArr:[],
                searchHistory:[]
            }
        },
        methods:{
            goUrl(){
                if (window.history.length <= 1) {
                    this.$router.push('/');
                    return false
                } else {
                    this.$router.go(-1)
                }
            },
            hotSearch() {
                this.axios.post('searchpopular', {})
                    .then(res => {
                        this.hotArr=res.data.city;
                    })
                    .catch(err => console.log(err));
            },
            getSearch() {
                if(new Date().getTime()-this.keywordsTime>300){
                    let params = {
                        search: this.searchKey
                    }
                    if(!this.searchKey){
                        this.showFlag=false;
                        //Toast({message: '请输入关键字',duration: 1500});
                        return false
                    }
                    this.axios.post('wapsearch', params)
                        .then(res => {
                            this.searchArr=res.data;
                            this.showFlag= true
                        })
                        .catch(err => console.log(err));
                    this.keywordsTime=new Date().getTime();
                }



            },
            histSearch:function(key){
               this.searchKey=key
               this.getSearch()
            },
            searchHistoryFn() {
                var searchHistory = storage.get('searchhistory') || []
                if (this.searchKey) {
                    if (JSON.stringify(searchHistory).indexOf(this.searchKey)==-1){
                        searchHistory.push(this.searchKey);
                        storage.set('searchhistory', searchHistory);
                        this.searchHistory=searchHistory.reverse()
                    }
                }
            },
            //清空搜索历史
            searchHistoryClear:function(){
                storage.remove('searchhistory');
                this. searchHistory=[];
            },
            share() {
                wxShare({title: '搜索', debug: false}, function () {
                    console.log('分享成功')
                });
            }
        },
        mounted(){
            this.searchHistory=storage.get('searchhistory');
            if( this.searchHistory){
                this.searchHistory=this.searchHistory.reverse();
            }
            this.hotSearch();
            this.share();
        }
    }
</script>

<style lang="scss" scoped>
@import "../assets/base";
.search{
    position: relative;
    display: flex;
    align-items: center;
    height: rpx(130);
    padding:0 rpx(30);
    background: $color3;
    &-back{
        width: rpx(32);
        height: rpx(32);
        padding: rpx(30)  rpx(30)  rpx(30) rpx(10);
    }
    &-right{
        position: relative;
        flex: 1;
        &-input{
            width: 100%;
            border-radius: rpx(40);
            padding: rpx(10);
            height: rpx(80);
            line-height:1;
            font-size: rpx(34);
            padding-left: rpx(90);
            display: block;
        }
        &-icon{
            @include position(absolute,rpx(22),'-','-',rpx(40));
            width: rpx(32);
            height: rpx(32);
        }
    }
    &-list{
        padding: 0 rpx(30);
        &-item{
            border-bottom:solid 1px $color2;
            padding: rpx(30) 0 rpx(10);
            display: flex;
            align-items: center;
            &-title{
                flex: 1;
            }
            &-icon{
                overflow: hidden;
                width: rpx(80);
                text-align: right;
                font-size: rpx(24);
                color: $color5;
            }
        }
    }
}


.history{
    padding: rpx(30) 0 ;
    border-top:solid 1px $color2;
    border-bottom:solid 1px $color2;
    &-title{
        display: flex;
        padding: rpx(20) rpx(30);
        &-name{
            flex: 1;
            font-size:rpx(28);
            color: $color5;
        }
        &-empty{
            color: $color6;
            font-size:rpx(28);
        }
    }
    &-list{
        padding: 0  rpx(30);
        display: flex;
        flex-wrap: wrap;
        &-item{
            display: block;
            padding: rpx(20);
            font-size: rpx(34);
        }
    }
}

.hotCity{
    margin-top: rpx(60);
    padding:0 rpx(30) ;
    border-bottom:solid 1px $color2;
    &-title{
        padding-bottom:rpx(40) ;
        font-size:rpx(28);
        color: $color5;

    }
    &-list{
        display: flex;
        flex-wrap: wrap;
        &-item{
            margin-right: rpx(30);
            margin-bottom: rpx(30);
            padding: rpx(20);
            border: solid rpx(2) $color1;
            border-radius: $radius6;
            font-size: rpx(28);
        }
    }
}

.hotSearch{
    margin-top: rpx(60);
    padding:0 rpx(30) ;
    border-bottom:solid 1px $color2;
    &-title{
        padding-bottom:rpx(40) ;
        font-size:rpx(28);
        color: $color5;

    }
    &-list{
        display: flex;
        flex-wrap: wrap;
        &-item{
            margin-right: rpx(30);
            margin-bottom: rpx(30);
            padding: rpx(20);
            border: solid rpx(2) $color1;
            border-radius: $radius6;
            font-size: rpx(28);
        }
    }
}
</style>